<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_03_事件绑定</title>
    <!-- 解除闪动 -->
    <style type="text/css">
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="qqq">{{num}}</div>
        <!-- v-on加上冒号  用于时间绑定 -->
        <button v-on:click="num++">按钮1</button>
        <button @click="num++">按钮2</button>
        <!-- 默认会传递事件对象 -->
        <button v-on:click="firstMethod()">按钮3</button>
        <button @click="method2(0)">按钮4</button>
        <!-- 传递事件的对象,用$event，而且必须是放在最后一个位置，event也是固定写法 -->
        <button @click="method3(0,$event)">按钮5</button>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                firstMethod:function(){
                    this.num++;
                },
                method2:function(a){
                    this.num = a;
                },
                method3:function(a,e){
                    this.num = a;
                    console.log(e);

                }
            }
        });
    </script>
</body>

</html></SCRIPT>